오피스아워에서 하는 것

  • 월요일 : 해당 주 과제, 배우는 것에 대하여 설명
  • 수요일 : 해당 주 주제에 관해 주요한 부분 설명
  • 금요일 : 해당 주차 과제에 대한 솔루션

JavaScript Type

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol
  • Object

NaN의 type은 number

NaN은 주로 애러상황에서 만나게 됨

숫자가 아닌걸 숫자로 변환하려고 하였을때.

isNaN()으로 판별가능. type은 number이기 때문에 판별 불가

undefined

undefined는 주로 대입으로 선언하지 않음

컨벤션이 주로 그러하지 않다는 말

초기값 세팅이 안되어 있을 때 주로 나온다 (빈값으로 쓰이는편)

Object 타입

함수, 배열과 같은 것들…

심볼

지금 당장은 몰라도 됨.

하지만 나중에는 꼭 알고있어야 됨.

심볼이라는 자료형은 객체를 만들 때 

var obj = {
	a: 1,
	b: 2
};

와 같은걸 암호화? 처럼 할 수 있음

조금 더 자바스크립트 코드에 보안성 강화와 유지보수측면에서 좋음.

고유한 값? 암호화 된 값? 해쉬키 값? 같은거라고 생각하면 됨

Truthy and Falsy

Falsy는 어떤것들이 있나?

false, 0, -0, "", null, undefined, NaN, 0n

  • function을 Boolean으로 바꾸면 Truthy

Big int 0n?

  • javascript 검색할때는 default로 MDN을 보자.
  • 0n -> big int 형식으로 Falsy!

Q. Or, And Operator 문법애러

함수 || “hello”

function foo() {} || "hello" // Error
(function foo(){}) || "hello" // Pass

function foo() {} || “hello” 로 하면 애러가 난다. -> 애러가 났다는건 문법상 잘못되었다는 것.

(function foo(){}) || “hello” 와 같이 확실하게 구분지어야 한다.

객체 || “hello” , 객체 && “hello”

{} && “hello” 도 안됨 문법상 애러.

"hello" && {}

"hello" || {title: 123}

dㅘ 같이 순서를 바꾸면 되는데, 이유는 나중에 찾아보고 알려주신다고 함.

function

function에서 사람들이 제일 많이 햇갈리는게 return값.

모든 자바스크립트의 함수는 실행 후 결과값을 반환.

function foo() {
	return a + 3;
} // 함수를 만든 것. 선언. (실행 X)

foo(); // 함수 실행 * 소괄호가 들어간다

// 함수 실행문 위치한 자리에는 반환값이 들어간다
var a = foo(1) + foo(2); // var a = 4 + 5와 같다.
// 함수에는 return문이 없을 수도 있다. (명시하지 않을 수 있다.) 하지만 결과값은 undefined로 반환된다.
function foo(a) {
	console.log(a + 3);
}

var a = foo(1) + foo(2); //a = undefined + undefined;

// a -> NaN
// undefined는 덧셈을 할 수 없는데 덧셈을 하였으므로 NaN이 된다.

아래문도 똑같이 함수 반환값이 바로 결과로 적용된다.

function foo(a) {
  return a * 2;
}

const obj = {
  something : foo(4) // something : 8
}

이 부분은 많이 중요. 가장 기초적임.

Control Flow

반복문은 기초적인 틀에 사로잡히지 말아야 한다.

for (let i = 1; i < 3; i++ ) {
	// ToDo
}
// 와 같은 형태를 가장 많이 쓴다.
// 하지만 이러한 형태로 익숙해지지말고 원리를 이해해서 다르게 적용시킬 줄 알아야 한다
for (let i = 2; i <= 100; i+=2) {
  // ToDo
}
//와 같이 짝수만 적용 50번 반복된다.

var arr = [1,2,3,4,5]
for (let i = arr.length - 1; i >= 0; i--) {
  // ToDo
}
//와 같이 배열 역순으로 순회.

Object

초보자때는 Object에 대해 햇갈릴 것이 많을 수 있다.

아직 익숙하지 않아서 그런 것.

식별자

변수와 같은데, 선언시 JavaScript 선언 규칙에 맞춰줘야 한다.

var _sfsd = 1;
var $dsfsfs = 2;
var ewefwef = 3;
var 12312afefw = 4; // Error 문법적으로 안됨.
var sfsdf123 = 5;
var asdfs123sdfsadf = 6;
var a ffd = 7; //공백 안됨 Error

이 규칙은 객체의 Key값에도 적용된다.

var obj = {
  _obj: 1,
  $asd: 2,
  sdf: 3,
  123fff: 4, // Error 문법 애러,
  3 abc 1: 5, // Error
  
  '3abc': 6, //string타입으로 key를 주면 가능
}

obj.3abc // Error
obj['3abc'] // 대괄호를 이용해서 가져올 수 있다.
var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (let prop in obj) {
  console.log(prop);
} // 반복문을 통해 객체의 key값을 순회 할 수 있다.
// 순서는 선언순서와 같이 나올텐데, 
// * MDN에서 for in 문에 배열에 사용할 때는 특정순서로 작동된다는 보장은 없다고 한다. (arbitrary하게 작용)
// * 따라서 for in 문에대해서 key값을 순회할 때 순서가 순차적이지 않고 arbitrary하다는 점 기억!

Q. 객체 리터럴 - 리터럴 (literal)

리터럴 뜻은 문자 그대로의.

객체에서의 리터럴은 객체를 만드는 방법은 여러개가 있는데

var obj = {};
var obj2 = {
  a: 1,
  b: "abc",
  c: function() { console.log("c"); 
}

이렇게 직접적으로 만드는 방법이 객체 리터럴 선언 방법

// 객체 리터럴 선언이 아닌 객체 선언 방법
var obj = new Object();
var obj2 = Object.create({});
var obj3 = new 함수명();

배열도 리터럴 선언 방식이 있는데,

var arr = [];
var arr2 = [1, 2, 3, 4];
// 배열 리터럴이 아닌 것
var arr = new Array();
var arr2 = new Array(20);
// 객체 리터럴
{} 
{
  a: 1,
  b: 2
}

// 배열 리터럴
[]
[1, 2, 3, 4]

말 그대로 선언할 때 객체나 배열 형태의 값을 직접적으로 표현하는게 리터럴 즉, 객체 리터럴, 배열 리터럴이고 이 리터럴 즉, 객체 리터럴, 배열 리터럴로 바로 선언해주면 객체, 배열을 리터럴로 생성했다고 할 수 있을 것 같습니다.

Q. 배열에서 요소와 key, value 차이

var arr = [1, 2, 3];
arr.push({"adding": "add"});
arr.length // 4

위와 같이 객체 추가시에 길이가 추가 된다.

var arr = [1, 2, 3];
arr.length // 3
arr.adding = "add";
arr // [1, 2, 3, adding: "add"]
arr.length // 3

위 방법에서 3째줄과 같이 요소를 추가하면 길이 변화가 없음.

why?

위 방법은 arr 배열객체에 key, value(property?)를 넣어준 것

해당 방법은 요소를 넣어 준 것이라서 length에 변화가 없다.

요소로 추가를 해줘야 length에 변화가 있음

ETC…

  • 난문가 탄생
  • 요즘에는 혹시를 Hoxy라고 한단다.. 나는 몰랐다 ㅠㅠ
  • 금요일에는 깜짝 놀랄만한 것이 있다는데 과연?